﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="css/main.css" />
		<script src="js/chart/analytics.js"></script>
		<script src="js/chart/Chart.bundle.js"></script>
		<script src="js/chart/utils.js"></script>
		<script src="js/jquery-2.1.1.js"></script>
		<script>
		$(document).ready(function(){
			var css = $("body").width();
			$("#canvas").css("width",css*0.6+"px");
		});
		</script>
		<style>
			.img_content{
				border:1px #E6E6E6 solid; float:left; margin:5px 10px; width:23.5%; height:110px; line-height:20px; padding-top:20px
			}
			.img_img{
				float:left; margin-left:30px
			}
			.img_p_one{
				font-weight:bold; font-size:24px; margin:5px 0 0 30px;
			}
			.img_p_two{
				color:#999; margin:10px 0 0 30px;
			}
		</style>
	</head>

	<body >
		<div class="adminBean-main" style="padding:2% 0 0 0;">
			<div class="layui-input img_content">
				<div class="img_img">
					<img src="images/order.png" height="60"/>
				</div>
				<div style="float:left;">
					<p class="img_p_one">6</p>
					<p class="img_p_two">今日订单数</p>
				</div>
				<div style="clear:both"></div>
			</div>
			<div class="layui-input img_content">
				<div class="img_img">
					<img src="images/money.png" height="60"/>
				</div>
				<div style="float:left;">
					<p class="img_p_one">6</p>
					<p class="img_p_two">今日交易额</p>
				</div>
				<div style="clear:both"></div>
			</div>
		<!-- 	<div class="layui-input img_content">
				<div class="img_img">
					<img src="images/lastorder.png" height="60"/>
				</div>
				<div style="float:left;">
					<p class="img_p_one">6</p>
					<p class="img_p_two">昨日下单数</p>
				</div>
				<div style="clear:both"></div>
			</div>
			<div class="layui-input img_content">
				<div class="img_img">
					<img src="images/money.png" height="60"/>
				</div>
				<div style="float:left;">
					<p class="img_p_one">6</p>
					<p class="img_p_two">昨日总收益</p>
				</div>
				<div style="clear:both"></div>
			</div> -->
			<div style="float:left; width:65%">
			<canvas id="canvas" width="" height="400" style="display: block; height: 400px; padding-top:40px;"></canvas>
			</div>
			<div style="float:left;width:33%; margin-top:45px;">
				<div style="width:auto; border:1px #E6E6E6 solid; padding:15px 0 15px 20px;">
					7天交易数据
				</div>
				<div style="border-left:1px #E6E6E6 solid; border-right:1px #E6E6E6 solid; height:250px;">
				
				</div>
				<div style="border:1px #E6E6E6 solid; width:100%; line-height:30px; padding:10px 0;">
					<div style="width:50%; margin-left:20px; float:left;">支付宝：30</div>
					<div style="float:left;">微信：80</div>
					<div style="width:50%; margin-left:20px; float:left;">余额：20</div>
					<div style="float:left;">消费币：10</div>
					<div style="float:left;width:50%; margin-left:20px;">兑换币：20</div>
					<div style="clear:both"></div>
				</div>
			</div>
			<script>
		        var config = {
		            type: 'line',
		            data: {
		                labels: ["07-14", "07-15", "07-16", "07-17", "07-18", "07-19", "07-20"],
		                datasets: [{
		                    label: "下单数",
		                    backgroundColor: '#EF2869',
		                    borderColor: '#EF2869',
		                    data: [100,200,300,395,300,200,100],
		                    fill: false,
		                }, {
		                    label: "成交量",
		                    fill: false,
		                    backgroundColor: '#0A84E1',
		                    borderColor: '#0A84E1',
		                    data: [13,34,21,34,35,68,54],
		                }]
		            },
		            options: {
		                responsive: false,
		                title:{
		                    display:false,
		                    text:'Chart.js Line Chart'
		                },
		                tooltips: {
		                    mode: 'index',
		                    intersect: false,
		                },
		                hover: {
		                    mode: 'nearest',
		                    intersect: true
		                },
		                scales: {
		                    xAxes: [{
		                        display: true,
		                        scaleLabel: {
		                            display: false,
		                            labelString: 'Month'
		                        }
		                    }],
		                    yAxes: [{
		                        display: true,
		                        scaleLabel: {
		                            display: false,
		                            labelString: 'Value'
		                        }
		                    }]
		                }
		            }
		        };
		        window.onload = function() {
		            var ctx = document.getElementById("canvas").getContext("2d");
		            window.myLine = new Chart(ctx, config);
		        };
			    </script>
		</div>
	</body>

</html>